<template>
  <el-card class="tag-card" shadow="hover">
    <!-- 卡片内容区域 -->
    <div class="card-content">
      <!-- 卡片标题区域 -->
      <div class="card-header">
        <h3 class="tag-name">{{ data.name }}</h3>
        <p class="create-time">{{ formatDateTime(data.createTime) }}</p>
      </div>

      <!-- 卡片数据统计区域 -->
      <el-descriptions :column="1" class="stats-container">
        <!-- 所属家庭 -->
        <el-descriptions-item>
          <template #label>
            <div class="stat-label">
              <el-icon class="stat-icon">
                <el-User/>
              </el-icon>
              <span>所属家庭</span>
            </div>
          </template>
          <span class="stat-value">{{ data.familyName }}</span>
        </el-descriptions-item>

        <!-- 创建者 -->
        <el-descriptions-item>
          <template #label>
            <div class="stat-label">
              <el-icon class="stat-icon">
                <el-User/>
              </el-icon>
              <span>创建者</span>
            </div>
          </template>
          <span class="stat-value">{{ data.createBy }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 卡片操作按钮 -->
      <div class="card-actions">
        <el-button
          class="view-btn"
          @click.stop="openDetail"
        >
          查看详情
        </el-button>
        <el-button
          class="edit-btn"
          @click.stop="openEdit"
        >
          编辑
        </el-button>
        <el-button
          class="delete-btn"
          type="danger"
          plain
          @click.stop="handleDelete"
        >
          删除
        </el-button>
      </div>
    </div>
  </el-card>

  <!-- 标签详情对话框 -->
  <TagDetail v-model:visible="detailVisible" :data="detailData" @refresh="$emit('refresh')"/>

  <!-- 编辑标签对话框 -->
  <el-dialog
    v-model="editVisible"
    title="编辑标签"
    width="500px"
    :draggable="true"
    class="edit-dialog"
  >
    <el-form
      ref="editForm"
      :model="editData"
      label-width="100px"
      :rules="editRules"
    >
      <el-form-item label="标签名称" prop="name">
        <el-input
          v-model="editData.name"
          placeholder="请输入标签名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="标签描述">
        <el-input
          v-model="editData.description"
          placeholder="请输入标签描述"
          type="textarea"
          :rows="4"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editVisible = false">取消</el-button>
      <el-button type="primary" @click="submitEdit">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, reactive} from "vue";
import TagDetail from "./TagDetail.vue";
import type {TagCard, TagForm} from "@/api/tag/type.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteTagById, updateTag} from "@/api/tag";

const props = defineProps<{
  data: TagCard,
  familyId: number | null,
}>();

const emit = defineEmits(["refresh"]);

const detailVisible = ref(false);
const editVisible = ref(false);
const detailData = ref({...props.data});
const editForm = ref();

// 编辑表单数据
const editData = reactive<TagForm>({
  ...props.data
});

// 编辑表单验证规则
const editRules = reactive({
  name: [
    {required: true, message: "请输入标签名称", trigger: "blur"},
    {min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur"}
  ]
});

// 格式化日期显示
const formatDateTime = (dateString: string) => {
  return new Date(dateString).toLocaleString();
};

/**
 * 打开标签详情
 */
const openDetail = () => {
  detailData.value = {...props.data};
  detailVisible.value = true;
};

/**
 * 打开编辑对话框
 */
const openEdit = () => {
  editData.name = props.data.name;
  editData.description = props.data.description || '';
  editVisible.value = true;
};

/**
 * 提交编辑
 */
const submitEdit = async () => {
  try {
    await editForm.value.validate();
    // 这里调用编辑API
    const res = await updateTag(editData,props.familyId!, props.data.id);

    if (res.code === "M000") {
      editVisible.value = false;
      ElMessage.success('编辑成功');
      emit("refresh");
    }

  } catch (error) {
    console.error("编辑失败:", error);
    ElMessage.error("编辑失败");
  }
};

/**
 * 处理删除操作
 */
const handleDelete = () => {
  ElMessageBox.confirm(
    `确定要删除标签 "${props.data.name}" 吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
      draggable: true,
      customClass: 'modern-message-box'
    }
  ).then(() => {
    deleteTag();
  }).catch(() => {

  });
};

/**
 * 删除标签
 */
async function deleteTag() {
  const res = await deleteTagById(props.data.id)
  if (res.code === "M000") {
    emit("refresh");
  }
}
</script>

<style scoped lang="scss">
/* 卡片基础样式 */
.tag-card {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--el-border-color-light);
  cursor: default;


  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    border-color: var(--el-color-primary-light-5);
  }

  /* 卡片内容区域 */
  .card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }

  /* 卡片头部样式 */
  .card-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--el-border-color-light);

    .tag-name {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .create-time {
      margin: 4px 0 0;
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }
  }

  /* 统计容器样式 */
  .stats-container {
    flex: 1;
    margin-bottom: 12px;

    /* 统计标签样式 */
    .stat-label {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: var(--el-text-color-secondary);

      .stat-icon {
        margin-right: 6px;
        font-size: 14px;
      }
    }

    /* 统计值样式 */
    .stat-value {
      font-size: 14px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
  }

  /* 卡片操作按钮区域 */
  .card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;

    .view-btn {
      background-color: #1F63FF;
      color: white;
      border: none;

      &:hover {
        background-color: var(--el-color-primary-light-3);
      }
    }

    .edit-btn {
      background-color: var(--el-color-warning-light-8);
      color: var(--el-color-warning-dark-2);
      border: none;

      &:hover {
        background-color: var(--el-color-warning-light-5);
      }
    }

    .delete-btn {
      &:hover {
        border-color: var(--el-color-danger);
        color: var(--el-color-danger);
      }
    }
  }
}


/* 编辑对话框现代化样式 */
.edit-dialog {
  width: 500px !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);

  .el-dialog__header {
    padding: 20px 24px;
    margin-right: 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-bottom: 1px solid #f0f0f0;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #1d1e1f;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 24px;
      font-size: 18px;

      &:hover .el-dialog__close {
        color: #ff4d4f;
      }
    }
  }

  .el-dialog__body {
    padding: 24px;

    .el-form-item {
      margin-bottom: 22px;

      &:last-child {
        margin-bottom: 0;
      }

      .el-form-item__label {
        font-size: 14px;
        font-weight: 500;
        color: #555;
        padding-bottom: 6px;
      }

      .el-input,
      .el-textarea {
        .el-input__wrapper,
        .el-textarea__inner {
          border-radius: 8px;
          padding: 10px 16px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
          transition: all 0.3s;

          &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
          }

          &:focus {
            box-shadow: 0 0 0 2px rgba(31, 99, 255, 0.2);
            border-color: #1F63FF;
          }
        }
      }

      .el-textarea {
        .el-textarea__inner {
          min-height: 120px;
          resize: vertical;
        }
      }
    }
  }

  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    background-color: #fafafa;

    .el-button {
      height: 40px;
      padding: 0 24px;
      border-radius: 20px;
      font-weight: 500;
      transition: all 0.3s;

      &.el-button--default {
        border: 1px solid #d9d9d9;

        &:hover {
          color: #1F63FF;
          border-color: #c6e2ff;
          background-color: #ecf5ff;
          transform: translateY(-2px);
        }
      }

      &.el-button--primary {
        background-color: #1F63FF;
        border-color: #1F63FF;

        &:hover {
          background-color: #3a7afe;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(31, 99, 255, 0.3);
        }
      }
    }
  }
}
</style>
